<template>
    <div class="mi-canvas-tools-item">
		<Tooltip placement="top" :content="$t('message.ClearScreen')">
            <span class="mi-canvas-tools-icon" :class="type === 'clean'&&active==='eraser' ? 'active' : null">
                <i class="iconfont icon-eraser-clean" :class="type === 'clean' ? 'active' : null" @click="toolSelect('clean')" :style="theme=='dark'?'color: #fff':''"></i>
            </span>
        </Tooltip>
	</div>
</template>
<script lang="ts">
	import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
	import {Getter} from 'vuex-class';

	@Component
	export default class EraserComponent extends Vue {
		@Prop() active: any;
		@Prop() type: any;
		@Getter('getTheme', {}) theme: any;
		@Emit() toolSelect(name: string) {}

		onPopperShow(): void {
			this.toolSelect(this.type === 'clean' ? 'select' : this.type);
		}
	}
</script>
